<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="scrolltolower">
		<view class="stageItem-box">
			<view class="steps-box flex-row-center">
				<template v-for="(item,index) in stepsList" :key="index">
					<view class="steps-content flex-center">
						<view class="steps-item-active" v-if="matchInfo?.stepsIndex==index">
							<view class="steps-icon"></view>
							<text class="steps-name">{{item.name}}</text>
						</view>
						<view class="steps-item" v-else>
							<view class="steps-icon flex-center">
								<text class="center">{{index+1}}</text>
							</view>
							<text class="steps-name">{{item.name}}</text>
						</view>
					</view>
					<view class="steps-line" v-if="index!==stepsList.length-1"></view>
				</template>
			</view>
			<!-- ========== 报名	 ============= -->
			<view class="sgin-content" v-if="matchInfo?.stepsIndex==0">
				<!-- 时间 -->
				<view class="timer-box w100">
					<text class="title">报名时间</text>
					<view class="content w100">
						<text class="time">{{matchInfo?.sign_start_text}} ~ {{matchInfo?.sign_end_text}}</text>
					</view>
				</view>
				<view class="timer-box w100 mT32">
					<text class="title">比赛时间</text>
					<view class="content w100">
						<text class="time">{{matchInfo?.match_text}}</text>
					</view>
				</view>
				<!-- 底部按钮 -->
				<view class="footer-btn w100 flex-center">
					<template>
						<view class="team-btn-nostart flex-center" @click="toLogin" v-if="!userInfo">
							<text class="text">立即登录</text>
						</view>
						<view class="team-btn-nostart flex-center" v-else-if="matchInfo?.status==1">
							<text class="text">已结束</text>
						</view>

						<template v-else-if="matchInfo?.ordered==1">
							<view class="btn-box flex-center" v-if="matchInfo?.signRecord==1">
								<text class="text">已签到</text>
							</view>
							<view class="btn-box flex-center" @click="signBtn" v-else>
								<text class="text">立即签到</text>
							</view>
						</template>
						<view class="team-btn-nostart flex-center" v-else-if="matchInfo?.countDownstatus==0">
							<text class="text">未开始</text>
						</view>
						<view class="team-btn-nostart flex-center" v-else-if="matchInfo?.countDownstatus==2">
							<text class="text">报名已结束</text>
						</view>
						<view class="team-btn-nostart flex-center" v-else-if="matchInfo?.isDiyFull==1">
							<text class="text">已满员</text>
						</view>
						<view class="btn-box flex-center" v-else @click="signShow">
							<text class="text" v-if="matchInfo?.agreement">立即参赛(已签署)</text>
							<text class="text" v-else>立即参赛(未签署)</text>
						</view>
					</template>

				</view>

			</view>
			<!-- ========== 比赛	 ============= -->
			<view class="competition-content w100" v-if="matchInfo?.stepsIndex==1">
				<view class="no-start-box flex-center w100" v-if="matchInfo?.round_status==='INIT'">
					<text class="text">赛事马上开始，敬请期待~</text>
					<template v-if="matchInfo?.my_roundStart_auth==1">
						<up-button text="开始比赛" shape="circle" :loading="startLoading" loadingText="正在提交" :customStyle="{
					height:'88rpx',
					fontWeight: 'bold',
					fontSize: '34rpx',
					color: '#0A534F',
				}" @click="startMatch" color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)"></up-button>
					</template>
				</view>
				<template v-else-if="matchInfo?.round_status==='STARTING'">
					<competitionStageVue @changeStage="changeStage"></competitionStageVue>
				</template>

			</view>
			<!-- ========== 结果	 ============= -->
			<template v-if="matchInfo?.stepsIndex==2">
				<resultItemVue ref="resultItem"></resultItemVue>
			</template>
		</view>
	</scroll-view>
</template>

<script setup>
	import resultItemVue from './resultItem.vue';
	import competitionStageVue from '../components/competitionStage.vue';
	import {
		matchInfoStore
	} from '@/stores/match';
	import {
		userInfoStore
	} from '@/stores/user';
	const userStore = userInfoStore();
	const matchStore = matchInfoStore();
	const matchInfo = computed(() => matchStore.matchInfo);
	const emit = defineEmits(['checkedSign', 'refreshData', 'getlocationBysign'])
	const aloneChecked = ref(false);
	const userInfo = ref(computed(() => userStore.userInfo));
	const startLoading = ref(false);
	const resultItem = ref(null);
	const stepsList = [{
		name: '报名中',
		label: 0
	}, {
		name: '比赛',
		label: 1
	}, {
		name: '结果',
		label: 2
	}, ];
	const competitionList = [{
		name: '第一场',
		state: -1
	}, {
		name: '第二场',
		state: 1
	}, {
		name: '第三场',
		state: 0
	}];
	const signShow = () => { //打开报名弹窗
		emit('checkedSign', {
			type: 0
		})
	};
	const toLogin = () => {
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
	const toCompetitionStage = () => { //查看比赛轮次详情
		uni.navigateTo({
			url: '/page_activity/views/competitionStage'
		})
	};

	const startMatch = async () => {
		const res = await $Api.match.startMatch({
			match_id: matchInfo.value.m_id
		}, true);
		if (res.code === 1) {
			uni.showToast({
				title: '开始成功！'
			})
			setTimeout(() => {
				matchInfo.value.round_status = 'STARTING'; //状态
				emit('refreshData');
			}, 300)
		} else {
			uni.$u.toast(res.msg);
		}
	};
	const signBtn = () => { //签到
		emit('getlocationBysign');
		// uni.scanCode({
		// 	success: (res) => {
		// 		console.log('条码内容：', res.result);
		// 		// signRound(res.result);
		// 	}
		// });
	};
	const signRound = async (code) => { //签到接口
		const res = await $Api.match.signRound({
			match_id: matchInfo.value.m_id,
			verify_code: code
		})
		if (res.code === 1) {
			uni.showToast({
				title: '签到成功！'
			});
			setTimeout(() => {}, 600)
		} else {
			uni.$u.toast(res.msg);
		}
	}

	const scrolltolower = () => {
		if (matchInfo.value?.stepsIndex == 2) {
			console.log('结果组件滚动到底部');
			if (resultItem.value) {
				resultItem.value.getMoreRanks();
			}
		}
	}
	const changeStage = (index) => { //切换状态
		matchInfo.value.stepsIndex = index;
	}
</script>

<style lang="scss" scoped>
	.stageItem-box {
		padding-bottom: 180rpx;
		position: relative;
	}

	.steps-box {
		width: 100%;
		justify-content: space-evenly;
		margin-bottom: 110rpx;

		.steps-content {
			width: 120rpx;
			position: relative;
		}

		.steps-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.steps-icon {
				width: 38rpx;
				height: 38rpx;
				background: #4D4D4D;
				border-radius: 50%;

				.center {
					font-weight: bold;
					font-size: 24rpx;
					color: #191C1F;
				}
			}

			.steps-name {
				width: 120rpx;
				text-align: center;
				position: absolute;
				bottom: -50rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #4C4C4C;
				z-index: 99;
			}
		}

		.steps-item-active {
			.steps-icon {
				width: 50rpx;
				height: 50rpx;
				// background-color: red;
				background: linear-gradient(270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%);
				border-radius: 50%;
				box-sizing: border-box;
				border: 14rpx solid #2F423C;
			}

			.steps-name {
				width: 100%;
				text-align: center;
				position: absolute;
				bottom: -50rpx;
				left: 0;
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}

		.steps-line {
			width: 122rpx;
			height: 4rpx;
			border-radius: 2rpx;
			background-color: #4C4C4C;
		}
	}

	.mT32 {
		margin-top: 32rpx;
	}

	.timer-box {
		padding: 0 20rpx;
		background-color: #222528;

		.title {
			width: 100%;
			font-weight: bold;
			font-size: 30rpx;
			color: #DEDEDE;
			line-height: 86rpx;
			text-align: center;
			display: inline-block;

		}

		.content {
			border-top: 2rpx solid #203332;
			width: 100%;

			.time {
				font-weight: 400;
				font-size: 28rpx;
				color: #DEDEDE;
				line-height: 110rpx;
			}
		}
	}

	.footer-btn {
		flex-direction: column;
		// position: fixed;
		// left: 0;
		// bottom: constant(safe-area-inset-bottom);
		height: 180rpx;
		background-color: #191C1F;

		.name {
			font-size: 24rpx;
			color: #66B7AF;
		}



		.team-btn-nostart {
			width: 708rpx;
			height: 80rpx;
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(108, 199, 190, 0.38);
			border-radius: 47rpx;
			margin-top: 32rpx;
			background: $no-active-color;

			.text {
				color: $noActive-text-color;
				font-size: 30rpx;
				font-weight: bold;

			}
		}
	}

	.competition-content {
		width: 710rpx;
		background: #222528;
		border-radius: 20rpx;
		padding: 32rpx 20rpx;
		box-sizing: border-box;

		.no-start-box {
			flex-direction: column;

			.text {
				font-size: 30rpx;
				color: $description-color;
				margin-bottom: 68rpx;
				margin-top: 32rpx;
			}
		}

	}

	.btn-box {
		width: 100%;
		height: 80rpx;
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(108, 199, 190, 0.38);
		border-radius: 47rpx;
		margin-top: 32rpx;
		background: $btn-bg-color;

		.text {
			font-weight: 800;
			font-size: 30rpx;
			color: $btn-text-color;

		}
	}
</style>